import React, { useMemo, useEffect, useContext } from 'react'
import styles from './index.module.less'
import Panel from '../Panel'
import Table, { columnsType } from '../Table'
import { tableRData } from '@/config'
import { DatePicker, Radio, Select, Input, Form } from 'antd';
import { useForm } from 'antd/es/form/Form'
const { RangePicker } = DatePicker;
import H2_2 from '@/assets/H2_2.png'
import H2_6 from '@/assets/H2_7.png'
import { Footer } from '../../App'
import SearchForm from '../CommonSearch'
import Lines from '../Xline/Line'
const FooterContent = (props) => {
  const { onSubmit } = props
  const [form1] = useForm()
  const [form2] = useForm()
  const ctx = useContext(Footer)
  useEffect(() => {
    form1.setFieldsValue(ctx.initialValue)
    form2.setFieldsValue(ctx.initialValue)
  })
  const searchList = useMemo(() => {

    return [

      {
        name: 'ip',
        child: <Select placeholder='请选择剩余时间' onChange={() => getTimeForm1()} style={{ width: 170 }}></Select>,
        label: '剩余有效期',
      },
      {
        name: 'time',
        child: <Input placeholder='请输入告警IP' onChange={() => getTimeForm1()} style={{ width: 180 }} ></Input>,
        label: '告警时间',
      },

    ]
  }, [])
  const searchLineList = useMemo(() => {
    const options = [
      { label: '近七天', value: 'Apple' },
      { label: '近一个月', value: 'Pear' },
      { label: '近一年', value: 'Orange', },
    ];
    return [
      {
        name: 'period',
        child: <Radio.Group
          optionType="button"
          options={options}
          buttonStyle="solid"
          onChange={() => getTimeForm2()}
        >

        </Radio.Group>,
        label: '',
      },
      {
        name: 'tidme',
        child: <RangePicker onChange={() => getTimeForm2()}></RangePicker>,
        label: '告警时间',
      },

    ]
  }, [])

  const columns: columnsType[] = useMemo(() => {
    return [
      {
        dataIndex: 'index',
        title: '序号',

      },
      {
        dataIndex: 'IpAddress',
        title: 'IP地址',
      },
      {
        dataIndex: 'remainderTime',
        title: '剩余有效期',
      },
    ]
  }, [])
  const getTimeForm1 = () => {
    onSubmit(form1.getFieldsValue(true))
  }
  const getTimeForm2 = () => {
    onSubmit(form2.getFieldsValue(true))
  }
  return (
    <div className={styles.footer}>
      <div>
        <Panel searchList={searchList} url={H2_2} form={form1}></Panel>
        <Table columns={columns} data={ctx.tableData}></Table>
      </div>
      <div>
      <div className={styles.panel}>
        <div className={styles.topImg} style={{ background: `url(${H2_6})` }}>
          <div className={styles.search}>
            <SearchForm formList={searchLineList} form={form2}></SearchForm>
          </div>

        </div>
      </div>
      <Lines data={ctx.lineData}></Lines>
      </div>
    </div>
  )
}

export default React.memo(FooterContent)